{% extends "index.html" %}

{% block css-javascript-agregados %}
{% endblock %}

{%block heading_content %}Seleccione un usuario{% endblock %}
{% block content %}
  <div class="list-container" style="float:left">
    <div class="row" id="autocomplete">
      <span class="left">Filtrar</span>
      <span class="right ui-corner-all" style="background-image: none"><input type="text" id="user_list" onkeypress="javascript:clearOut();"/>
        {% for object in user_list %}
        <div class="row" id="{{object.euser.id}}">
          <span class="left">
            <img class="img_border" align="left" src="{{object.euser.get_profile.foto.url}}" width="128px" height="128px" />
          </span>
          <span class="right ui-corner-all" style="width: 60%;background-image: none">
            <a href="/comunidadcyt/accounts/profileSummary/{{object.euser.id}}">{{object.euser.first_name}} {{object.euser.last_name}}</a>
            <ul>
            {% if object.eut %}
              {% for usertype in object.eut%}
                <li><h3>Tipo usuario: {{usertype.name}}</h3></li>
              {% endfor %}
            {% else %}
                <li><p><i>Aún no se le ha asignado un tipo de usuario.</i></p></li>
            {% endif %}
            </ul>
          </span>
        </div>
        {% endfor %}
    </div>
  </div>
  <script type="text/javascript">
    $("#user_list").keyup(function(event){
      if (event.which == 8 && $("#user_list").val() == ""){
        $(".row:not(#autocomplete)").fadeIn();
      }
    });
    function clearOut(){
      $(".row:not(#autocomplete)").fadeOut('fast');
    }
    
    $("#user_list").autocomplete({
      source: function(request,response){
        $.ajax({
          url: "/comunidadcyt/find/autocomplete/user/list/key_xhr/",
          data: {
            term: request.term
          },
          success: function(data){
            var response_array = new Array();
            if (data.list.length != 0){
              $(".row:not(#autocomplete)").each(function(index,elem){
                for (i in data.list){
                  if (index == 0){
                    response_array[response_array.length]=data.list[i].name;
                  }
                  if (this.id == data.list[i].id)
                  {
                    $("#"+data.list[i].id).fadeIn('slow');
                  }
                }
              });
            }
            response(response_array);
          },
          dataType: "json"
        });
      }
    });
  </script>
{% endblock %}